import { CSS2DReactObject } from '../../components/css-2d-react-object/CSS2DReactObject';
import { Object3D, Matrix4 } from 'three-legacy';
import { CircleToggle, CircleToggleProps } from './CircleToggle';

export class CSS2DToggle {
  private object: CSS2DReactObject;

  constructor(
    private value: boolean,
    private onClick: (value: boolean) => void,
  ) {
    this.init();
  }

  private init() {
    this.object = new CSS2DReactObject<CircleToggleProps>(
      document.createElement('div'),
      CircleToggle,
      {
        value: this.value,
        onClick: (newValue) => {
          this.value = newValue;
          this.object.updateProps({
            value: newValue,
            onClick: this.object.props.onClick,
          });
          this.onClick(newValue);
        },
      },
    );
  }

  applyMatrix(matrix: Matrix4) {
    this.object.applyMatrix4(matrix);
  }

  setPosition(x: number, y: number, z: number) {
    this.object.position.set(x, y, z);
  }

  addTo(group: Object3D) {
    group.add(this.object);
  }

  destroy() {
    this.object.destroy();
  }
}
